<template>
  <div class="single-container">
    <div class="single-title">订单状态</div>
    <div class="chart-container">
      <div class="chart-container-left" id="third_chart" :spinning="spinning"></div>
      <div class="chart-container-right" v-if="isShow">
        <div class="right-single-line right-six-line-first">
          <div class="right-single-line-color system-error"></div>
          <div class="right-single-line-title">已&nbsp;&nbsp;报&nbsp;单:</div>
          <div class="right-single-line-value">{{billStateResultData[1].number}} 台</div>
        </div>
        <div class="right-single-line">
          <div class="right-single-line-color ups-error"></div>
          <div class="right-single-line-title">已&nbsp;&nbsp;指&nbsp;派:</div>
          <div class="right-single-line-value">{{billStateResultData[2].number}} 台</div>
        </div>
        <div class="right-single-line">
          <div class="right-single-line-color drive-error"></div>
          <div class="right-single-line-title">进&nbsp;&nbsp;行&nbsp;中:</div>
          <div class="right-single-line-value">{{billStateResultData[8].number}} 台</div>
        </div>
        <div class="right-single-line">
          <div class="right-single-line-color io-error"></div>
          <div class="right-single-line-title">暂&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;停:</div>
          <div class="right-single-line-value">{{billStateResultData[9].number}} 台</div>
        </div>
        <div class="right-single-line">
          <div class="right-single-line-color machine-error"></div>
          <div class="right-single-line-title">待&nbsp;&nbsp;回&nbsp;访:</div>
          <div class="right-single-line-value">{{billStateResultData[5].number}} 台</div>
        </div>
        <div class="right-single-line">
          <div class="right-single-line-color line-error"></div>
          <div class="right-single-line-title">完&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;成:</div>
          <div class="right-single-line-value">{{billStateResultData[6].number}} 台</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "BillStateContainer",
    props: {
      billStateData: Array,
      billStateResultData: Object,
    },
    data () {
      return {
        newBillStateData: [],
        isShow: false,
        spinning: false
      }
    },
    watch: {
      billStateData: function (newVal) {
        if (newVal.length > 0) {
          this.newBillStateData = newVal;
          this.spinning = true;
          this.init_chart();
        }
      },
      billStateResultData: function (newVal) {
        if (JSON.stringify(newVal) !== "{}") {
          this.isShow = true;
        }
      }
    },
    methods: {
      init_chart () {
        const myChart = this.$echarts.init(document.getElementById('third_chart'));
        const option = {
          title: {
            text: '',
            // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'center',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'top',
            // 副标题文本样式设置
            subtextStyle: {
              fontSize: 18,
              color: '#8B2323'
            }
          },
          color: ['#24C768', '#01C9FD', '#EA5F5F', '#FFE300'],
          tooltip: {
            trigger: 'item',
            position: 'right',
            formatter: "{b} {c}%"
          },
          series: [
            {
              name: '订单状态',
              type: 'pie',
              radius: '85%',  // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
              //radius: ['30%', '60%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
              center: ['50%', '50%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
              data: this.newBillStateData,
              // itemStyle 设置饼状图扇形区域样式
              itemStyle: {
                // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(30, 144, 255，0.5)'
                }
              },
              // 设置值域的那指向线
              labelLine: {
                normal: {
                  show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                }
              },
              // 设置值域的标签
              label: {
                normal: {
                  position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                  // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                  // {a}指series.name  {b}指series.data的name
                  // {c}指series.data的value  {d}%指这一部分占总数的百分比
                  // formatter: '{c}%'
                  formatter: function (e) {
                    var newValue = e.percent.toFixed(1);
                    if (newValue >= 5) {
                      return (newValue + '%')
                    }else {
                      return ''
                    }
                  }
                }
              }
            }
          ]
        };
        myChart.setOption(option);
      },
    },
    mounted () {

    }
  }
</script>

<style scoped="scoped">
  .single-container{
    height: 100%;
    width: 100%;
    color: black;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
  }

  .single-title{
    height: 40px;
    line-height: 40px;
    width: 25%;
    text-align: center;
    color: #01B9FF;
    font-size: 17px;
    font-weight: bolder;
  }
  .chart-container{
    width: 100%;
    height: 260px;
    overflow: hidden;
  }
  .chart-container-left{
    width: 60%;
    float: left;
    height: 100%;
  }
  .chart-container-right{
    width: 39%;
    float: left;
    height: 100%;
  }
  .right-single-line{
    height: 30px;
    line-height: 30px;
    width: 100%;
  }
  .right-single-line-first{
    margin-top: 20px;
  }
  .right-single-line-color{
    height: 9px;
    width: 9px;
    margin-top: 10px;
    margin-left: 5px;
    float: left;
    border-radius: 50%;
    background: green;
  }
  .right-single-line-title{
    height: 30px;
    width: 40%;
    color: black;
    text-align: center;
    float: left;
  }
  .right-single-line-value{
    height: 30px;
    width: 40%;
    color: black;
    text-align: center;
    float: left;
  }

  .right-single-line-value-fault{
    height: 30px;
    width: 40%;
    color: black;
    text-align: left;
    float: left;
  }
  .right-four-line-first{
    margin-top: 60px;
  }
  .right-six-line-first{
    margin-top: 35px;
  }
  .fault-top-container{
    height: 300px;
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 10px;
  }
  .bill-statics-container{
    overflow: hidden;
    padding-bottom: 10px;
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 10px;
  }
  .fault-title{
    height: 40px;
    line-height: 40px;
    width: 25%;
    text-align: left;
    margin-left: 1.5%;
    color: #01B9FF;
    font-size: 17px;
    font-weight: bolder;
  }
  .fault-desc-container{
    height: 260px;
    width: 100%;
  }
  .fault-desc-container-left{
    width: 24%;
    margin-left: 3%;
    float: left;
    height: 260px;
  }
  .fault-desc-container-middle{
    width: 19%;
    height: 100%;
    float: left;
  }
  .fault-desc-container-right{
    height: 100%;
    float: left;
    margin-left: 2%;
    width: 47%;
  }
  .fault-desc-container-right-folder{
    height: 100%;
    float: left;
    margin-left: 2%;
    width: 65%;
  }

  .fault-desc-container-right-service{
    height: 100%;
    float: left;
    margin-left: 2%;
    width: 48%;
  }
  .fault_type_chart_container{
    width: 100%;
    height: 100%;
  }
  .bill-total-container{
    width: 46%;
    float: left;
    margin-left: 2%;
    height: 100%;
    overflow: hidden;
    font-size: 15px;
  }
  .bill-container-content{
    overflow: hidden;
    width: 100%;
    padding-bottom: 10px;
    line-height: 35px;
  }
  .get-more{
    overflow: hidden;
    width: 100%;
    padding-bottom: 10px;
    line-height: 35px;
    color: #FFEA68;
    cursor: pointer;
  }
  .bill-container-header{
    height: 35px;
    line-height: 35px;
    width: 100%;
    overflow: hidden;
    display: flex;
    border-bottom: 1px dashed #7a7a7a;
  }
  .client-unit{
    height: 32px;
    line-height: 32px;
    width: 40%;
    color: #01B9FF;
    font-size: 17px;
    text-align: center;
    float: left;
  }
  .client-desc{
    height: 32px;
    line-height: 32px;
    width: 60%;
    font-size: 17px;
    color: #01B9FF;
    text-align: center;
    float: left;
  }

  .single-client-unit{
    height: 32px;
    line-height: 32px;
    width: 40%;
    color: white;
    text-align: center;
    font-size: 15px;
    float: left;
    border-bottom: 1px dashed #7a7a7a;
  }
  .single-client-desc{
    height: 32px;
    line-height: 32px;
    width: 60%;
    font-size: 15px;
    color: white;
    text-align: center;
    float: left;
    border-bottom: 1px dashed #7a7a7a;
  }
  .single-client-container{
    width: 100%;
    height: 32px;
    line-height: 32px;
  }
  .system-error{
    background: #24C768;
  }
  .drive-error{
    background: #EA5F5F;
  }
  .machine-error{
    background: #01C9FD;
  }
  .line-error{
    background: #8378EA;
  }

  .ups-error{
    background: #FFE300;
  }
  .io-error{
    background: #FF7E00;
  }
  .mechanial-error{
    background: #0070C6;
  }


</style>

